<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><!--popup-->

<script><!--popup-->

$(document).ready(function(){

	

	$(document).ready(function() {



	$("#gallery article .details").css("display", "none");



	/* =GALLERY: Show info on hover */

	$("#gallery article").hover(function() {

		$(this).find(".details").css("display", "block");

	}, function() {

		$(this).find(".details").css("display", "none");

	});

	

});

        //When you click on a link with class of poplight and the href starts with a # 

        $('a.poplight[href^=#]').click(function() {

                var popID = $(this).attr('rel'); //Get Popup Name

                var popURL = $(this).attr('href'); //Get Popup href to define size

                                

                //Pull Query & Variables from href URL

                var query= popURL.split('?');

                var dim= query[1].split('&');

                var popWidth = dim[0].split('=')[1]; //Gets the first query string value

 

                //Fade in the Popup and add close button

                $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="popup/close.png" class="btn_close" title="Close Window" alt="Close" width="30px" height="30px"/></a>');

                

                //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

                var popMargTop = ($('#' + popID).height() + 80) / 2;

                var popMargLeft = ($('#' + popID).width() + 80) / 2;

                

                //Apply Margin to Popup

                $('#' + popID).css({ 

                        'margin-top' : -popMargTop,

                        'margin-left' : -popMargLeft

                });

                //Fade in Background

                $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

                $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

                

                return false;

        });

        //Close Popups and Fade Layer

        $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

                  $('#fade , .popup_block').fadeOut(function() {

                        $('#fade, a.close').remove();  

        }); //fade them both out

                

                return false;

        });

});

</script>  <!--end popup-->



<style> <!--css popup-->

#fade {

    background: none repeat scroll 0 0 #000000;

    display: none;

    height: 100%;

    left: 0;

    opacity: 0.8;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9999;

}

.popup_block {

    background: none repeat scroll 0 0 #FFFFFF;

    border: 20px solid #DDDDDD;

    border-radius: 10px 10px 10px 10px;

    box-shadow: 0 0 20px #000000;

    display: none;

    float: left;

    font-size: 1.2em;

    left: 50%;

    position: fixed;

    top: 50%;

    z-index: 99999;

}

img.btn_close {

    float: right;

    margin: -30px -30px 0 0;

}

</style>  
<?php
	jimport('joomla.application.component.view');
	class kinh_doanhViewdanh_sach_san_pham extends JView
	{
            //hien thi danh sach san pham
		function display($tpl=null)
		{
			$model = $this->getModel();
			$data=$model->danh_sach_san_pham();
                        $i=0;
                        ?>
<h2>Danh Sách Sản Phẩm</h2>
<table border="1">
    <?php 
    foreach($data as $row)
        {
            if($i%5==0)
                {
?>
                    
                    <tr><td height = '50' width='150'>
                    <a href="index.php?option=com_kinh_doanh&task=them_don_hang&id_product=<?php //echo $row->id;?>" rel="popup_name" class="poplight">
                        
                        <strong><?php echo $row->name;$i++;?>
                    <br/>Giá:<?php echo $row->price;?></strong></a>
                    
                    </td>
                        <?php
                }
            else
                {?>
                    <!--<td height = '50' width='150'>
                        <a href="index.php?option=com_kinh_doanh&task=them_don_hang&id_product=<?php //echo $row->id;?>"><strong><?php //echo $row->name;$i++;?>
                    <br/>Giá:<?php //echo $row->price;?></strong></a>
                    </td>-->
                    <td height = '50' width='150'>
                        <a href="#?=500" rel="popup_name" class="poplight"><strong><?php echo $row->name;$i++;?>
                    <br/>Giá:<?php echo $row->price;?></strong></a>
                        <div id="popup_name" class="popup_block">
                                                   <?php echo $row->id;?>
                        </div>    
                    </td>
                     
                    <?php
                }
        }
    ?>
</table><?php		
		}
		
	}
?>

